<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <script type="text/javascript" src="js/login_check.js"></script>
    <script>
        $(function () {
            $("#username").blur(function () {
                //1.失去焦点，获得用户名
                var username = $("#username").val();
                //2.服务器获得用户名参数
                $.ajax(
                    {
                        "url": "/checkUsername",
                        "error": "请求失败",
                        "data": {"username": username},
                        "dataType": "json",
                        "success": function (data) {
                            alert(data.isExist)
                            if (data.isExist) {
                                $("#check_username").html("用户名已存在");
                                $("#check_username").css("color", "red");
                            } else {
                                $("#check_username").html("用户名可以使用");
                                $("#check_username").css("color", "green");
                            }
                        },
                        "type":"get"
                    }
                );
                //3.服务器对用户名校验

                //4.服务器返回校验结果
            });
        })
    </script>
</head>

<body>
<div id="dd-logo" style="margin-bottom:10px;">
    <a href="index.html"><img src="img/DangDanglogo.gif" style="position: relative;left:200px" width="300px"
                              height="60px"></a>
</div>
<div class="signindiv">
    <div style="position:absolute;left:10%;top: 130px;height: 420px;width: 450px">
        <a href="#"><img width="100%" height="100%" src="img/login/ad.jpg" alt=""></a>
    </div>
    <div class="container-fluid">
        <form id="signinForm" class="form-horizontal form1">
            <div>
                <h4 style="padding-left: 20px;margin-top: 0px;margin-bottom: 20px;font-weight: bold">密码登录</h4>
            </div>
            <div class="form-group ">
                <label class="col-sm-3 control-label">用户名</label>
                <div id="user-input" class="col-sm-8 ">
                    <input type="text" class="form-control has-feedback" name="username" id="username"
                           placeholder="请输入用户名"
                           aria-describedby="inputSuccess2Status">
                    <span id="check_username"></span>
                    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"
                          style="display: none;"></span>
                </div>
            </div>
            <div id="pwd-input" class="form-group">
                <label for="inputPassword3" class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="col-sm-8">
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div id="" class="form-group">
                <label for="inputPassword3" class="col-sm-3 control-label">验证码</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control">
                </div>
                <div class="col-sm-4">
                    <img src="/VerifyCodeServlet" onclick="changeCode()" id="authCode" title="refresh"
                         style="cursor: pointer">
                    <script>
                        function changeCode() {
                            $("#authCode").attr("src", "/VerifyCodeServlet?time=" + new Date().getTime());
                            // document.getElementById("authCode").src="/VerifyCodeServlet?time="+new Date().getTime();
                        }
                    </script>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-3">
                    <button type="submit" class="btn btn-default" style="width: 150px">登录</button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <div class="checkbox">
                        <a href="#" style="padding-right: 100px">忘记密码</a>
                        <a href="#">注册账号</a>
                    </div>
                </div>
            </div>
        </form>
        <br>
    </div>
</div>
<hr style="margin-top: 6px; margin-bottom: 6px; border: 0; border-top: 2px solid #eee;">
<p><a href="#">公司简介</a> |<a href="#">诚聘英才</a>|<a href="#">手机当当</a>|<a href="#">网站联盟</a>|<a href="#">当当招商</a>|<a
        href="#">机构销售</a>|<a href="#">官方Blog</a></p>
<p style="margin-top: 5px">Copyright (C) 当当网 2004-2017, All Rights Reserved</p>
<p>京ICP证041189号|出版物经营许可证 新出发京批字第直0673号|食品流通许可证：SP1101011010021855(1-1)</p>
<p>互联网药品信息服务资格证编号：(京)-非经营性-2012-0016|京公网安备110101000001号</p>
<p>
    <a href=""><img src="img/login/validate.gif"></a>
    <a href=""><img src="img/login/bottom2.png"></a>
    <a href=""><img src="img/login/bottom3.png"></a>
</p>

</body>

</html>